<template>
  <el-button
    @click="clicked"
    v-show="this.$slots.default !== undefined"
    class="label"
    size="small"
  >
    <i class="dot" :class="activeClass"></i>
    <slot></slot>
  </el-button>
</template>

<script>
/**
 * 此组件封装了三级页面的标签（即是主体页面上方的带一个蓝点的按钮）
 * @props isActive 是否被触发，当此值为true时，蓝点为蓝色，否则为灰色
 */
export default {
  name: "DotLabel",
  props: {
    isActive: {
      type: Boolean,
      default: false,
      deep: true,
    },
  },
  methods: {
    clicked() {
      this.$emit("active");
    },
  },
  computed: {
    activeClass() {
      return this.isActive ? "active" : "";
    },
  },
};
</script>

<style scoped>
.label {
  width: 1rem;
  margin-top: 0.04rem;
  margin-bottom: 0.04rem;
  padding-left: 0.04rem;
  text-align: center;
}
.dot {
  display: inline-flex;
  height: 0.055rem;
  width: 0.055rem;
  border-radius: 50%;
  margin-right: 0.04rem;
  border: #dcdfe6 solid 2px;
}
.active {
  background-color: #014fde;
}
.el-button {
  margin-right: 0.052083rem;
  margin-left: 0;
  font-size: .07rem;

}
</style>
